<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
    <div class="max-w-2xl mx-auto px-4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
        <div v-if="status === 'success'" class="space-y-6">
          <div class="w-20 h-20 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto">
            <Icon name="heroicons:check-circle" class="w-12 h-12 text-green-600" />
          </div>
          <h1 class="text-3xl font-bold text-gray-900 dark:text-white">支付成功！</h1>
          <p class="text-gray-600 dark:text-gray-400">您的会员已开通，感谢您的支持</p>

          <div v-if="order" class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-6 text-left">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">订单信息</h2>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">订单号：</span>
                <span class="text-gray-900 dark:text-white">{{ order.orderNo }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">套餐：</span>
                <span class="text-gray-900 dark:text-white">{{ order.planName }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">金额：</span>
                <span class="text-gray-900 dark:text-white font-semibold">¥{{ order.totalPrice }}</span>
              </div>
            </div>
          </div>

          <div class="flex gap-4">
            <NuxtLink
              to="/"
              class="flex-1 px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              返回首页
            </NuxtLink>
            <NuxtLink
              to="/tools"
              class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-colors"
            >
              发现工具
            </NuxtLink>
          </div>
        </div>

        <div v-else class="space-y-6">
          <div class="w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto">
            <Icon name="heroicons:x-circle" class="w-12 h-12 text-red-600" />
          </div>
          <h1 class="text-3xl font-bold text-gray-900 dark:text-white">支付失败</h1>
          <p class="text-gray-600 dark:text-gray-400">支付过程中出现问题，请重试</p>

          <div class="flex gap-4">
            <NuxtLink
              to="/pricing"
              class="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              重新选择套餐
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const $api = useNuxtApp().$api
const authStore = useAuthStore()

const status = ref<string>('pending')
const order = ref<any>(null)

onMounted(async () => {
  status.value = route.query.status as string || 'failed'
  const orderNo = route.query.orderNo as string

  console.log('💳 支付结果页面加载:', { status: status.value, orderNo })

  if (orderNo) {
    try {
      const orders = await $api('/orders/my') as any[]
      order.value = orders.find((o: any) => o.orderNo === orderNo)
      
      console.log('📋 订单信息:', order.value)
    } catch (error) {
      console.error('❌ 加载订单失败:', error)
    }
  }

  // ✅ 如果支付成功，刷新用户信息（更新会员状态）
  if (status.value === 'success') {
    console.log('🔄 支付成功，刷新用户信息...')
    
    try {
      await authStore.fetchUser()
      console.log('✅ 用户信息已刷新:', {
        用户: authStore.user?.nickname,
        订阅类型: authStore.user?.subscriptionType,
        订阅结束日期: authStore.user?.subscriptionEndDate,
        是否会员: authStore.isPremium,
      })
    } catch (error) {
      console.error('❌ 刷新用户信息失败:', error)
    }
  }
})
</script>




